<!--
 * @Author: ChunLai
 * @Date: 2022-02-21 09:38:38
 * @LastEditTime: 2025-09-11 08:54:51
 * @Description: 多选按钮公共组件
 * @FilePath: \02.bldinsure\src\components\MultiSpanRadio.vue
-->
<template>
  <div class="multi_radios">
    <span
      class="multi_radios-item thin-border"
      v-for="(item, index) in arrList"
      :key="index"
      :class="{ 'active': checkedList.includes(item.keyId) }"
      @click="handleClick(item)"
    >
      {{ item.text }}
    </span>
  </div>
</template>

<script>
export default {
  name: "MultiSpanRadio",
  props: {
    arrList: {
      type: Array,
      default: () => [],
    },
    curVal: {
      type: [String, Number, Boolean],
      default: () => "",
    },
    fieldKey: {
      type: String,
      default: () => "",
    },
  },
  data() {
    return {
      checkedList: [],
    };
  },
  created() {
    if (this.curVal) {
      let arr2 = this.curVal.split("#");
      this.checkedList = arr2; //.map(ele => Number(ele))
    }
  },
  methods: {
    handleClick(item) {
      if (!this.fieldKey) return;
      let obj = {};
      if (this.checkedList.includes(item.keyId)) {
        this.checkedList = this.checkedList.filter((ele) => ele != item.keyId);
      } else {
        this.checkedList.push(item.keyId);
      }
      obj[this.fieldKey] = this.checkedList.join("#");
      this.$emit("clickEvent", obj);
    },
  },
};
</script>

<style lang="less" scoped>
.multi_radios {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;

  &-item {
    min-width: 70px;
    height: 26px;
    line-height: 26px;
    color: #747474;
    font-size: 14px;
    text-align: center;
    padding: 0 5px;
    margin: 3px 0 3px 6px;
    background-color: #f7f7f7;
    &.thin-border {
      &::after {
        border: 1px solid #e5e5e5;
      }
      &.active {
        color: #f54040;
        background-color: #fff0f0;
        &::after {
          border: 1px solid #f54040;
        }
      }
    }
    &.bg-col {
      color: #f54040;
      background-color: #fff0f0;
      &::after {
        border: 1px solid #f54040;
      }
    }
  }
}
</style>
